const app = getApp();
var startX, endX;
var moveFlag = true;// 判断执行滑动事件
// 随机色
function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}
function getArr (e){
  let arr = [];
  for(var i=0;i<e;i++){
    arr.push({
      num: i, bgc: getRandomColor()
    })
  }
  return arr;
}


Page({
  data: {
    content: "可以试试左右滑动了",
    arr: getArr(100),
    i:0
  },
  onLoad(){
  
    this.animation = wx.createAnimation({
      // 动画持续时间，单位ms，默认值 400
      duration: 300,
      timingFunction: 'linear',
      transformOrigin: 'left 100',
      success: function (res) {
        console.log(res)
      }
    })
  },
  touchStart: function (e) {
    startX = e.touches[0].pageX; // 获取触摸时的原点
    moveFlag = true;
  },
  // 触摸移动事件
  touchMove: function (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 50) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 50) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }

  },
  // 触摸结束事件
  touchEnd: function (e) {
    moveFlag = true; // 回复滑动事件
  },

  move2left() {
    let i = this.data.i;
    let arr = this.data.arr;
    this.animation.translateX(-400).step();
    console.log(i)
    if (i + 1 < arr.length) {
      arr[i++].animation = this.animation.export();
    } else {
      wx.showToast({
        title: '没有更多啦',
        icon: "none"
      })
      return;
    }
    console.log(arr)
    this.setData({
      arr: arr, i
    })
    console.log("data里的arr",this.data.arr)

  },
  move2right() {
    let i = this.data.i;
    let arr = this.data.arr;
    this.animation.translateX(+400).step();
    console.log(i)
    if (i + 1 < arr.length) {
      arr[i++].animation = this.animation.export();
    } else {
      wx.showToast({
        title: '没有更多啦',
        icon: "none"
      })
      return;
    }
    this.setData({
      arr: arr, i
    })

  },
})